<template>
	<view class="">
		<cu-custom :isBack="false" bgColor="HomePageStyle">
			<block slot="content">姚记潮品订货123</block>
		</cu-custom>
		<view class="HomePage">
			<view class="AvatarArea">
				<view class="AvatarBg">
					<img class="Avatar" src="https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/logo.jpg">
				</view>

				<view class="Title">
					<view class="MainTitle"> 姚记潮品订货 </view>
					<view class="SubTitle"> 姚记潮品订货 </view>
				</view>
			</view>

			<view class="SearchBox">
				<view class="SearchAndShare">
					<view class="Search" @click="toSearch">
						<input type="text" disabled class="SearchInput" placeholder="搜索本店商品" />
						<img :src="imgUrl + gameDetailsData.HomePage.Search" alt="" class="SearchIcon" />
					</view>
					<view class="Share" @click="zwkf">
						<img :src="imgUrl + gameDetailsData.HomePage.Share" alt="" class="ShareIcon" />
					</view>
				</view>
			</view>

			<view class="GoodsList">
				<view class="GoodListTitleArea">
					<view class="Title">好货精选</view>
					<view class="List">
						<view class="ListItem" v-for="(item, index) in GoodsList" :key="index"
							@click="toShopDetails(item.goodsCode)">
							<img :src="item.goodsMainImage" alt="" class="GoodsListItem" />
							<view class="GoodsListItemContent">
								<view class="GoodsTitle">
									{{ item.goodsName }}
								</view>
								<view class="price">
									<view class="RMB"> ￥ </view>
									<view class="PriceNumber"> {{ item.goodsPrice }}/个 </view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="LoadMore" @click="LoadMore"> 加载更多 </view>

			<!-- <view class="box"> </view> -->
		</view>
	</view>
</template>

<script>
	import gameDetails from "@/static/lib/public.js";
	export default {
		data() {
			return {
				gameDetailsData: gameDetails,

				imgUrl: this.$http.imgUrl,
				
				// 新品
				newShoping:'',

				GoodsList: [],
				page: {
					pageNumber: 1,
					pageSize: 10,
					totalPage: "",
				},
			};
		},
		
		methods: {
			// 获取首页数据
			async getData(){
				const res = await this.https.get(this.api.home.appGoodsIndex,{
					pageNumber:this.page.pageNumber,
					pageSize:this.page.pageSize
				})
				this.page.totalPage=res.totalPage
				if(this.page.pageNumber === 1 ){
					const i= res.data.findIndex(i=>{
						return i.isNew
					})
					this.newShoping=res.data[i]
					this.GoodsList=res.data.filter((item,index)=>{
						return index!==i
					})
				}else{
					this.GoodsList.push(res.data)
				}
			},
			
			initPage() {
				this.getGoodsList();
			},
			// 加载更多
			LoadMore() {
				if (this.page.pageNumber >= this.page.totalPage) {
					uni.showToast({
						title: "暂无数据",
						icon: "none",
					});
					return;
				}
				this.page.pageNumber++;

				this.getGoodsList();
			},
			async getGoodsList() {
				const url = this.api.home.GoodsList;
				uni.showLoading({
					title: "加载中",
				});
				const res = await this.$http.get(url, {
					...this.page,
				});
				uni.hideLoading();

				this.page.totalPage = res.data.data.totalPage;
				this.GoodsList = this.GoodsList.concat(res.data.data.data);
			},
			toShopDetails(id) {
				uni.navigateTo({
					url: "/pagesA/HomePage/ShopDetails?id=" + id,
				});
			},
			toSearch() {
				uni.navigateTo({
					url: "/pagesA/HomePage/Search"
				})
			},
			zwkf() {
				uni.showToast({
					title: "暂未开放",
					duration: 2000,
					icon: "none",
				});
			},
		},
		created() {
			this.initPage();
			this.getData()
		},
	};
</script>

<style lang="scss" scoped>
	.HomePage {
		width: 100%;
		padding-bottom:152rpx;

		.AvatarArea {
			width: 100%;
			height: 120rpx;
			background-color: #457df7;
			position: fixed;
			padding-top: 40rpx;
			padding-left: 30rpx;
			display: flex;
			z-index: 99;

			.AvatarBg {
				width: 70rpx;
				height: 70rpx;
				background-color: #ccc;
				border-radius: 50%;
				box-sizing: border-box;
				padding-left: 5rpx;
				padding-top: 5rpx;

				.Avatar {
					width: 60rpx;
					height: 60rpx;
					background-color: #FFFFFF;
					border-radius: 50%;
				}
			}

			.Title {
				color: #FFFFFF;
				margin-left: 30rpx;

				.MainTitle {
					font-size: 32rpx;
				}

				.SubTitle {
					font-size: 24rpx;
				}
			}
		}

		.SearchBox {
			box-sizing: border-box;
			background-color: #457df7;
			height: 230rpx;
			width: 100%;
			padding-left: 30rpx;
			padding-top: 40rpx;
		
			.SearchAndShare {
				width: 100%;
				height: 64rpx;
				margin-top: 100rpx;
				display: flex;
		
				.Search {
					width: 85%;
					border-radius: 30rpx;
					height: 100%;
					background-color: #FFFFFF;
					margin-right: 20rpx;
					display: flex;
					align-items: center;
					padding-left: 20rpx;
		
					.SearchLeft {
						width: 76rpx;
						height: 100%;
						position: relative;
						padding-top: 20rpx;
		
						.scanCodeIcon {
							margin-left: 20rpx;
		
							.scanCode {
								width: 28rpx;
								height: 26rpx;
							}
						}
		
						.line {
							position: absolute;
							top: 50%;
							right: 0;
							transform: translateY(-50%);
							width: 2rpx;
							height: 24rpx;
							background-color: #9fa19f;
							opacity: 0.3;
						}
					}
		
					.SearchInput {
						margin-left: 10rpx;
						flex: 1;
					}
		
					.SearchIcon {
						width: 26rpx;
						height: 26rpx;
						margin-right: 20rpx;
					}
				}
		
				.Share {
					width: 60rpx;
					height: 60rpx;
		
					.ShareIcon {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}
		
		.GoodsList {
			margin-top: 20rpx;
		
			.GoodListTitleArea {
				.Title {
					position: relative;
					margin-left: 45rpx;
		
					&::before {
						content: "";
						position: absolute;
						width: 7rpx;
						height: 30rpx;
						background-color: #457df7;
						left: -20rpx;
						top: 18%;
					}
				}
		
				.List {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					margin-top: 20rpx;
					padding-left: 40rpx;
		
					.ListItem {
						width: 330rpx;
						margin-top: 20rpx;
						background-color: #FFFFFF;
						height: 500rpx;
						border-radius: 15rpx;
						margin-right: 20rpx;
		
						.GoodsListItem {
							width: 100%;
							height: 346rpx;
						}
		
						.GoodsListItemContent {
							height: 198rpx;
							padding: 16rpx 28rpx 0rpx 24rpx;
		
							.GoodsTitle {
								font-size: 24rpx;
								//  超出省略号
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
		
							.price {
								display: flex;
								align-items: center;
		
								.RMB {
									font-size: 16rpx;
								}
		
								.PriceNumber {
									font-size: 28rpx;
									color: #4d79f7;
								}
							}
						}
					}
				}
			}
		}

		.LoadMore {
			margin-left: 40rpx;
			width: 90%;
			height: 73rpx;
			background-color: #FFFFFF;
			border-radius: 35rpx;
			line-height: 73rpx;
			text-align: center;
			font-size: 20rpx;
			margin-top: 40rpx;
		}

		.box {
			height: 500rpx;
		}
	}
</style>